<template>
  <div>
    <div class="g-form form">
      <LiquidityHeader title="Import Pool" @back="$emit('change', 'home')" />
      <div class="form__token">
        <div class="g-clickable token" @click="showSelectToken('tokenA')">
          <img :src="tokenA.icon" />
          <span>{{ tokenA.symbol }}</span>
          <i class="iconfont icon-arrow-up"></i>
        </div>
        <div class="plus">
          <i class="iconfont icon-add"></i>
        </div>
        <div class="g-clickable token" @click="showSelectToken('tokenB')">
          <img :src="tokenB.icon" />
          <span>{{ tokenB.symbol }}</span>
          <i class="iconfont icon-arrow-up"></i>
        </div>
      </div>
    </div>
    <LPTokenCard :pair="pair" v-if="pair" />
    <div class="g-form empty" v-else>
      <span>You don't have liquidity in this pool yet.</span>
      <div><span @click="$emit('change', 'add')">Add Liquidity</span></div>
    </div>
    <NouDialog close-on-click-modal :visible.sync="isShowToken">
      <SwapToken @close="isShowToken = false" @select="hideSelectToken" />
    </NouDialog>
  </div>
</template>

<script>
import LPTokenCard from "@/components/LPTokenCard";
import SwapToken from "@/components/SwapToken";
import NouDialog from "@/components/common/NouDialog";
import LiquidityHeader from "./LiquidityHeader";

import { getTokenBySymbol } from "@/utils/token";
import { getPairInfo } from "@/init";
import { mapState } from "vuex";

export default {
  components: {
    SwapToken,
    NouDialog,
    LPTokenCard,
    LiquidityHeader,
  },
  data() {
    return {
      tokenA: getTokenBySymbol("TSE"),
      tokenB: getTokenBySymbol("BUSD"),
      pair: null,
      isShowToken: false,
      selectToken: "tokenA",
    };
  },
  watch: {
    ...mapState({
      account: (state) => state.account,
    }),
    "tokenA.address"() {
      this.loadPair();
    },
    "tokenB.address"() {
      this.loadPair();
    },
    account() {
      this.loadPair();
    },
  },
  mounted() {
    this.loadPair();
  },
  methods: {
    async loadPair() {
      const pair = await getPairInfo(this.tokenA, this.tokenB);
      const { userLiquidity } = pair;
      this.pair = pair;
      console.log("ddd", pair);
      if (+userLiquidity > 0) {
        const _pairCache = window.localStorage.getItem("pair_cache");
        const pairCache = _pairCache && JSON.parse(_pairCache) || {};
        const pairSymbol = `${this.tokenA.symbol}_${this.tokenB.symbol}`;
        pairCache[pairSymbol] = {
          tokenA: this.tokenA.symbol,
          tokenB: this.tokenB.symbol
        };
        window.localStorage.setItem("pair_cache", JSON.stringify(pairCache));
      }
    },
    hideSelectToken(token) {
      const { symbol } = token;
      if (this.selectToken === "tokenA") {
        this.tokenA = getTokenBySymbol(symbol);
      } else {
        this.tokenB = getTokenBySymbol(symbol);
      }
      this.isShowToken = false;
    },
    showSelectToken(type) {
      this.selectToken = type;
      this.isShowToken = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.form {
  &__token {
    padding: 20px 0;
    .token {
      cursor: pointer;
      height: 45px;
      border-radius: 8px;

      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--color-light);

      img {
        width: 22px;
        border-radius: 11px;
      }

      span {
        font-size: 14px;
        line-height: 1;
        font-family: "Roboto Medium";
        color: var(--color);
        margin: 0 5px 0 10px;
      }

      i {
        font-size: 16px;
        line-height: 1;
        font-weight: 500;
        opacity: 0.5;
        color: var(--color);
        transform: rotate(180deg);
      }
    }
    .plus {
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 0;
      i {
        font-size: 20px;
      }
    }
  }
}
.empty {
  margin: 20px auto 0;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  span {
    font-size: 14px;
    font-family: "Roboto Medium";
    color: var(--color-content);
  }

  div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;

    span {
      cursor: pointer;
      color: var(--color-sky-blue);
    }
  }
}
</style>
